<template>
  <div class="addhouse">
    <hunk-head name="房源详情编辑"></hunk-head>
    <div class="addhouseList">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <!-- <uni-forms-item label="房屋地址" name="address" :label-width="120" class="item1">
          <div class="address">{{houseinfo.address}}</div>
        </uni-forms-item> -->
        <div class="housAdd">
            <div class="lable">房屋地址</div>
            <div class="address">{{houseinfo.address}}</div>
          </div>
        <div style="height:10px;background:#F9F9F9;"></div>

        <!-- <uni-forms-item name="leasetype" label="租约方式" :label-width="120" class="item1">
          <uni-data-checkbox selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.leasetype" :localdata="leaseMode"/>
        </uni-forms-item>
        <div style="height:10px;background:#F9F9F9;"></div> -->

        <uni-forms-item label="房间号" name="roomno" required :label-width="120">
          <uni-easyinput type="text" :inputBorder="false" v-model="formData.roomno" placeholder="请输入房间号" />
        </uni-forms-item>
        <uni-forms-item name="payrent" label="是否允许线下交租" required :label-width="150">
          <uni-data-checkbox :disabled="true" selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.payrent" :localdata="payMode"/>
        </uni-forms-item>

        <uni-forms-item label="最低月租金" name="lowrent" :label-width="120">
          <!-- <uni-easyinput type="number" :disabled="true" :inputBorder="false" v-model="formData.lowrent" placeholder="请输入月租金金额" /> -->
          <div class="address">{{formData.lowrent}}</div>
        </uni-forms-item>

        <uni-forms-item label="展示月租金" name="showlowrent" required :label-width="120">
          <uni-easyinput type="number" :inputBorder="false" v-model="formData.showlowrent" placeholder="请输入展示月租金金额" />
        </uni-forms-item>

        <!-- <uni-forms-item label="押金" name="deposit" :label-width="120">
          <uni-data-checkbox selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.deposit" :localdata="depositMode"/>
        </uni-forms-item> -->

        <uni-forms-item name="renovation" label="装修" required :label-width="150">
          <uni-data-checkbox selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.renovation" :localdata="renovationMode"/>
        </uni-forms-item>

        <uni-forms-item name="roomType" label="房型" :label-width="120" class="cycleItme">
          <!-- <uni-data-checkbox mode="tag" selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.roomType" :localdata="roomTypeMode"/> -->
          <div class="typelist">
            <div v-for="(item,index) in houseType" :key="index">
              <!-- <img :src="item.img"  @click="checkHouseType(item)" > -->
              <div :class="['item-img',item.ischeck? 'check-img' : '']" @click="checkHouseType(item)">
                {{item.text}}
              </div>
            </div>
          </div>
        </uni-forms-item>

        <uni-forms-item label="房屋面积" name="roomarea" :label-width="120">
          <uni-easyinput type="text" :inputBorder="false" v-model="formData.roomarea" placeholder="请输入房屋面积" />
        </uni-forms-item>

        <uni-forms-item name="facilities" label="房屋设施" :label-width="120" class="cycleItme">
          <!-- <uni-data-checkbox mode="tag" selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.roomType" :localdata="roomTypeMode"/> -->
          <div class="roomFa" style="flexWrap: wrap;">
            <div v-for="(item,index) in houseFa" :key="index" class="iiii">
              <div :class="['item-img',item.ischeck? 'check-img' :'']" @click="checkHousefac(item)">
                {{item.dictlabel}}
              </div>
            </div>
          </div>
        </uni-forms-item>
        <uni-forms-item label="房屋图片" name="photos" :label-width="120" class="cycleItme">
          <uni-file-picker
            v-model="imageValue"
            fileMediatype="image"
            mode="grid"
            class="addImg"
            :image-styles="imageStyles"
            @select="select"
            @progress="progress"
            @success="success"
            @fail="fail"
            @delete="del"
          >
          <img v-if="baseUrl" class="imgbtn" :src="baseUrl+'house/addImg.png'" alt="">
          </uni-file-picker>

        </uni-forms-item>
      </uni-forms>
      <div class="btn">
        <button :class="['subBtn',ischuzu==1? 'hui' : '']" @click="submit">
          {{ischuzu==1?'已出租房间无法编辑':'保存'}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import { dictData, unloadImg } from '@/apis/public'
import { updateHouse } from '@/apis/housesInfo'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      renovationMode:[{"value": 0,"text": "精装修"    },{"value": 1,"text": "简装修"}],
      // leaseMode: [{"value": 0,"text": "短租"},{"value": 1,"text": "长租"}],
      payMode: [{"value": 0,"text": "否"    },{"value": 1,"text": "是"}],
      depositMode: [{"value": 0,"text": "一个月"    },{"value": 1,"text": "两个月"}],
      roomTypeMode: [
        {"value": 1,"text": "1室"},
        {"value": 2,"text": "2室"},
        {"value": 3,"text": "3室"},
        {"value": 4,"text": "4室"},
        {"value": 5,"text": "5室"}
      ],
      formData: {
        leasetype: 1,  //租约方式，
        roomno: '',   //房间号
        payrent: 1, //是否允许线下交租
        lowrent: 0 ,  //最低月租金
        showlowrent: 0,  //展示月租金
        deposit: 0,  //押金
        roomtype: 0, //房型
        roomarea: '', //房屋面积
        facilities: 0 , //房屋设施
        wid: 0,
        renovation: 0
      },
      rules: {
        roomno: {
          rules: [
            { required: true, errorMessage: '请输入房间号' }
          ]
        },
        // lowrent: {
        //   rules: [
        //     { required: true, errorMessage: '请输入月租租金' }
        //   ]
        // },
        showlowrent: {
          rules: [
            { required: true, errorMessage: '请输入展示月租租金' }
          ]
        }
      },
      houseType: [
        { id: 1, text: '一室', ischeck: false},
        { id: 2, text: '二室', ischeck: false},
        { id: 3, text: '三室', ischeck: false},
        { id: 4, text: '四室', ischeck: false},
        { id: 5, text: '五室', ischeck: false},
      ],
      houseFa: [
        // { id: 1, text: '无线网', ischeck:false},
      ],
      facilitiesArr:[],
      imageStyles: {
        width: '80px',
        height: '80px',
        border: 0
      },
      imgArry:[],
      imageValue:[],
      houseinfo: null,
      ischuzu: 1,
      newArry:[]
    }
  },
  created(){
    this.dictData()
  },
  onLoad(e){
    
    let data = JSON.parse(e.query)
    console.log(999,data)
    this.houseinfo = data.houseDetail
    this.formData.leasetype = data.item.leasetype
    this.formData.roomno = data.item.roomno
    this.formData.payrent = data.item.payrent
    this.formData.lowrent = data.item.lowrent
    this.formData.showlowrent = data.item.showlowrent
    this.formData.deposit = data.item.deposit
    this.ischuzu = data.item.outtype
    if(data.item.photos){
      let arr = data.item.photos.split(',')
      let that = this
      arr.forEach((item,index)=>{
        let a = {
          "name":item,
          "url":item,
        }
        that.imageValue.push(a)
        that.imgArry.push(a)
      })
    }
    this.houseType.forEach((item,index)=>{
      if(item.id == data.item.roomtype){
        this.houseType[index].ischeck = true
      }
    })
    this.formData.roomarea = data.item.roomarea
    this.formData.wid = data.item.wid
    this.formData.renovation = data.item.renovation == '精装修'? 0:1
    this.facilitiesArr = data.item.facilities.split(',')
    
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  methods: {
    dictData(){
      let that = this
      dictData({dict_type:'room_facilities'}).then(res=>{
        if(res.code == 200){
          that.houseFa = res.data.map((item,index)=>{
            item.id = index
            let idx = that.facilitiesArr.indexOf(item.dictcode+"")
            if(idx == -1){
              item.ischeck = false
            }else{
              item.ischeck = true
            }
            return item
          })
        }
      })
    },
    checkHouseType(res){
      this.houseType = this.houseType.map((item,index)=>{
        if(res.id == item.id){
          item.ischeck = true
        }else{
          item.ischeck = false
        }
        return item
      })
    },
    checkHousefac(item) {
      let idx = this.facilitiesArr.indexOf(item.dictcode)
      if(idx == -1){
        this.facilitiesArr.push(item.dictcode)
      }else{
        this.facilitiesArr.splice(idx,1)
      }
      this.houseFa[item.id].ischeck = !this.houseFa[item.id].ischeck
    },
    select(e) {
      console.log(e)
      let that = this
        e.tempFiles.forEach(el => {
            if(el.size>500*1000){
              uni.compressImage({
                src:el,
                success: res => {
                  unloadImg({path:res.tempFilePath}).then(res=>{
                    that.newArry.push({uuid:el.uuid,path:res.data[0].original_name})
                  })
                }
              })
            }else{
              unloadImg(el.file).then(res=>{
                that.newArry.push({uuid:el.uuid,path:res.data[0].original_name})
              })
            }
        });

      
    },
    progress(e) {
      console.log('上传文件',e)
    },
    success(e) {
      console.log('上传成功文件',e)
    },
    fail(e) {
      console.log('失败文件',e)
    },
    del(e){
      console.log('9999',e)
      let that = this
      if(e.tempFile.uuid){
        this.newArry.forEach((item,index)=>{
          if(e.tempFile.uuid == item.uuid){
            that.newArry.splice(index,1)
          }
        })
      }else{
        this.imgArry.forEach((item,index)=>{
          if(e.tempFile.path == item.url){
            that.imgArry.splice(index,1)
          }
        })
      }
    },
    submit(){
      if(this.ischuzu == 1){
        return
      }
      this.$refs.form.validate().then(res=>{

      let that = this
      let roomtype = 0
      this.houseType.forEach((item)=>{
        if( item.ischeck ){
          roomtype = item.id
        }
      })
      console.log('showlowrent',this.formData.showlowrent,'lowrent',this.formData.lowrent,this.formData.showlowrent<this.formData.lowrent)
      // if(parseInt(this.formData.showlowrent) < parseInt(this.formData.lowrent)){
      //   uni.showToast({
      //     title: '展示租金不能低于最低租金！',
      //     icon: 'none'
      //   })
      //   return
      // }
      let data = {...this.formData}
      data.userid = this.userid
      data.houseid = this.houseinfo.houseid
      data.roomtype = roomtype
      data.leasetype = 1
      data.renovation = this.renovationMode[this.formData.renovation].text
      data.facilities = this.facilitiesArr.join(',')
      let arr = []
      if(this.imgArry.length > 0){
        this.imgArry.forEach(item=>{
          let rr = item.url.split('file/')
          arr.push(rr[1])
        })
      }
      if(this.newArry.length > 0){
        this.newArry.forEach(item=>{
          arr.push(item.path)
        })
      }
      if(arr.length > 0){
        data.photos = arr.join(',')
      }else{
        data.photos = ''
      }
      updateHouse(data).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title: '编辑成功！',
            // icon: 'none'
            success:()=>{
              uni.navigateTo({ url: '/pages/manage/houseList/commponents/detail?query='+ JSON.stringify(that.houseinfo) })
            }
          })
          
        }else{
          // that.formData.renovation = that.formData.renovation="精装修"?0:1
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
      }).catch(err =>{
        console.log('表单错误信息：', err);
        
      })
      
      
    }
  }
}
</script>

<style lang="scss" scoped>
.addhouse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .addhouseList{
    flex: 1;
    background: #F9F9F9;
    overflow-y: auto;
  }
  
}
::v-deep .uni-forms{
  background: #FFFFFF;
  .uni-forms-item{
    // height: 45px;
    margin: 0 15px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFEFEF;
    .uni-forms-item__box{
      .uni-error-message{
        right: 0;
        left: auto;
        .uni-error-message-text{
          line-height: 10px;
          font-size: 10px;
        }
      }
      .uni-forms-item__inner{
        margin: 0;
        padding: 0;
      }
    }
    
    .uni-forms-item__label{
      padding: 0;
      height: 45px;
      .label-text{
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 21px;
        margin-left: 4px;
      }
    }
    .uni-forms-item__content{
      height: 45px;
      text-align: right;
      .uni-data-checklist{
        margin-bottom: 6px;
        height: 33px;
        .checklist-group{
          height: 100%;
          justify-content: flex-end;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
          line-height: 35px;
          .checklist-box.is--tag.is-checked{
            background-color: rgb(245, 245, 245);
            color: #FFBD6C;
          }
          .checklist-box{
            position: static;
            margin: 0;
            margin-right: 20px;
          }
          .checklist-box:last-child{
            margin-right: 0;
          }
        }
      }
      .uni-easyinput{
        .uni-easyinput__content{
          .uni-easyinput__content-input{
            height: 45px;
            text-align: right;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #4A4A4A;
            .uni-easyinput__placeholder-class{
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 45px;
              color: #9B9B9B;
              
            }
          }
        }
      }
      .uni-date{
        .uni-date-editor{
          div{
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #9B9B9B;
            line-height: 45px;
          }
        }
      }
      .address{
        height: 45px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 45px;
      }
    }
  }
  .uni-forms-item:last-child{
    border: 0;
  }
  .housAdd{
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    .lable{
      width: 150px;
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 21px;
    }
    .address{
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 20px;
    }
  }
  .item1{
    border: 0;
  }
  .cycleItme{
    height: auto;
    .is-direction-left{
      flex-direction: column;
      .uni-forms-item__label{
        height: auto;
        margin-top: 13px;
      }
      .uni-forms-item__content{
        height: auto;
        .checklist-group{
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .typelist{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    .item-img{
      width: 59px;
      height: 30px;
      background: rgba($color: #898989, $alpha: 0.08);
      border: 1px solid #898989;
      border-radius: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      text-align: center;
      line-height: 30px;
    }
    .check-img{
      background: rgba($color: #FFAA58, $alpha: 0.08);
      border: 1px solid #FFAA58;
      color: #FFAA58;
    }
  }
  .roomFa{
    align-items: center;
    flex-direction: row;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 10px;
    .iiii{
      margin-right: 10px;
      margin-top: 10px;
      .item-img{
        padding: 6px 15px;
        box-sizing: border-box;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 18px;
        background: rgba($color: #898989, $alpha: 0.08);
        border-radius: 15px;
        border: 1px solid #9B9B9B;
      }
      .check-img{
        background: rgba($color: #FFAA58, $alpha: 0.08);
        border: 1px solid #FFAA58;
        color: #FFAA58;
      }
    }
    .iiii:nth-child(5){
       margin-right: 0;
    }
  }
  .addImg{
    margin: 15px 0 15px 15px;
    .imgbtn{
      width: 80px;
      height: 80px;
    }
  }
}
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 44px;
  .subBtn{
    width: 345px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 45px;
    text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
  }
  .hui{
    background: rgba(130, 130, 130, 0.2);
    box-shadow:none
  }
  .subBtn::after{
    border: 0;
  }
  uni-button:after {
    border: 0;
  }
}

</style>
